<script setup lang="ts">
  import { Slots, useSlots, ref } from 'vue'
  import { ElTabs, ElTabPane } from 'element-plus'
  import { IconType } from '@xtail/vue3'
  import { XIconSet } from '../XIconSet'
  import { XIconSetIconify } from '../XIconSetIconify'
  import { XIconSetOnlineSearchIconify } from '../XIconSetOnlineSearchIconify'
  import { IconPickerPropsType, IconSetTypeConstType } from './types'
  import { IconSetTypeConst } from './consts'

  defineOptions({
    name: 'XIconPicker',
    components: {
      XIconSet,
      XIconSetIconify,
      XIconSetOnlineSearchIconify
    }
  })

  const props = withDefaults(defineProps<IconPickerPropsType>(), {
    iconSets: [] as any,
    onlineSearchTabPaneProps: {} as any,
    onlineSearchIconSetProps: {} as any,
    iconSetProps: {} as any,
    iconSetIconifyProps: {} as any,
    tabsProps: {} as any,
    tabsClass: '',
    tabsStyle: '',
    tabPaneProps: {} as any,
    tabPaneClass: '',
    tabPaneStyle: ''
  })

  const value = defineModel<IconType>({ default: null })

  const slots: Slots = useSlots()

  const activeIconSetName = ref(props.iconSets[0]?.name ?? '')

  const getIconSetProps = (iconSetType: IconSetTypeConstType) => {
    switch (iconSetType) {
      case IconSetTypeConst.IconSet:
        return props.iconSetProps
      case IconSetTypeConst.IconSetIconify:
        return props.iconSetIconifyProps
      default:
        return {}
    }
  }
</script>

<template>
  <div class="x-icon-picker">
    <el-tabs
      v-bind="tabsProps"
      v-model="activeIconSetName"
      class="x-icon-picker__tabs"
      :class="tabsClass"
      :style="tabsStyle"
    >
      <template v-if="slots['tabs-add-icon']" #add-icon>
        <slot name="tabs-add-icon" />
      </template>
      <template #default>
        <el-tab-pane
          v-if="onlineSearch"
          v-bind="{
            ...tabPaneProps,
            ...onlineSearchTabPaneProps,
            label: onlineSearchTabPaneProps.label ?? '在线搜索',
            name: onlineSearchTabPaneProps.name ?? 'online-search'
          }"
          class="x-icon-picker__tabs__online-search"
          :class="tabPaneClass"
          :style="tabPaneStyle"
        >
          <template v-if="slots['online-search-tab-pane-label']" #label>
            <slot name="online-search-tab-pane-label" />
          </template>
          <template #default>
            <component :is="onlineSearch" v-bind="onlineSearchIconSetProps" v-model="value">
              <template v-for="(_, name) in slots" :key="name" #[name]>
                <slot :name="name" />
              </template>
            </component>
          </template>
        </el-tab-pane>
        <el-tab-pane
          v-for="iconSet in iconSets"
          :key="iconSet.name"
          v-bind="{
            ...tabPaneProps,
            label: iconSet.name,
            name: iconSet.name
          }"
          :class="tabPaneClass"
          :style="tabPaneStyle"
        >
          <template v-if="slots['tab-pane-label']" #label>
            <slot name="tab-pane-label" :icon-set-name="iconSet.name" />
          </template>
          <template #default>
            <component
              :is="iconSet.type"
              v-bind="getIconSetProps(iconSet.type)"
              v-model="value"
              :icons="iconSet.icons"
            >
              <template v-for="(_, name) in slots" :key="name" #[name]>
                <slot :name="name" />
              </template>
            </component>
          </template>
        </el-tab-pane>
        <slot name="tab-pane-affix" />
      </template>
    </el-tabs>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
